<template>
  <div class="common-layout">
    <el-row>
      <el-col :span="6">
        <el-container class="left-container">
          <el-header style="min-height: 38vh">
            <div class="calendar common-div-card">
              <el-calendar ref="calendar" size="small" style="--el-calendar-border: none">
                <template #header="{ date }">
                  <span>三冷区域安全日历</span>
                  <span>{{ date }}</span>
                  <el-button-group>
                    <el-button size="small" @click="selectDate('prev-month')"> 上个月 </el-button>
                    <el-button size="small" @click="selectDate('today')">今天</el-button>
                    <el-button size="small" @click="selectDate('next-month')"> 下个月 </el-button>
                  </el-button-group>
                </template>
              </el-calendar>
            </div>
          </el-header>
          <el-main style="min-height: 25vh; width: 100%">
            <div class="ove-left-mid">
              <div class="common-div-card" style="height: 68%; padding: 12px">
                <div class="processGap">
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="70">轧后库 ： 70% </el-progress>
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="70" status="success">原料库 ： 70% </el-progress>
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="70" status="warning">重卷前库 ： 70% </el-progress>
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="70" status="exception">成品库 ： 70% </el-progress>
                </div>
              </div>
              <div class="common-div-card ove-left-mid-div2" style="padding: 12px">
                <div><span>当前班组：丁班</span></div>
                <el-button type="primary" size="small">查看考勤</el-button>
              </div>
            </div>
          </el-main>
          <el-footer style="height: 40vh">
            <!-- <el-card shadow="hover">
              <template #header>
                <div style="display: flex; text-align: center; align-items: center; justify-content: center; font-size: 16px">
                  <span>产量记录</span>
                </div>
              </template>
              <el-table
                height="30vh"
                :data="prodRecord"
                :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }"
                size="small"
              >
                <el-table-column prop="productionLine" label="机组" />
                <el-table-column prop="crew" label="班产" width="60px" />
                <el-table-column prop="day" label="日产" />
                <el-table-column prop="month" label="月产" />
                <el-table-column prop="year" label="年产" />
              </el-table>
            </el-card> -->
            <el-card class="flex-gap">
              <div class="radio-group" style="margin-top: 2vh">
                <span>产量记录</span>
                <el-radio-group v-model="radio" text-color="#626aef" fill="rgb(239, 240, 253)" class="radio-right" size="small" @change="getProdList">
                  <el-radio-button label="白班" value="day" />
                  <el-radio-button label="夜班" value="night" />
                  <el-radio-button label="日" value="daily" />
                  <el-radio-button label="月" value="month" />
                </el-radio-group>
              </div>
              <!-- <el-table
                height="30vh"
                :data="prodRank"
                :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }"
                size="small"
              >
                <el-table-column prop="num" label="名次" />
                <el-table-column prop="date" label="时间" />
                <el-table-column prop="workOut" label="产量" />
                <el-table-column prop="crew" label="班组" v-if="radio === 'day' || radio === 'night'" />
              </el-table> -->
              <GraphBarLine :datax="prodRankGraph.x" :data-bar1="prodRankGraph.y1" style="height: 30vh" :bar-name="['产量']" />
            </el-card>
          </el-footer>
        </el-container>
      </el-col>
      <el-col :span="9">
        <el-container>
          <el-header style="height: 40vh; width: 100%">
            <div class="prodBar common-div-card">
              <graph-bar-other
                :data1="prodOutputSet"
                :data2="prodOutputReal"
                :datax="prodOutputx"
                :title="prodOutputTitle"
                :data-name="prodOutputName"
              />
            </div>
          </el-header>
          <el-main style="height: 40vh">
            <div class="prodBar common-div-card">
              <graph-bar-other
                :data1="yieldRateSet"
                :data2="yieldRateReal"
                :datax="yieldRatex"
                :title="yieldRateTitle"
                :max="98.35"
                :min="98.15"
                :data-name="yieldRateName"
              />
            </div>
          </el-main>
          <el-footer style="min-height: 25vh">
            <el-card class="ove-mid-footer-process" shadow="hover" v-if="WorkRate.length > 0">
              <div class="inline-block" v-for="(item, index) in WorkRateList">
                <el-progress :text-inside="true" :stroke-width="26" :percentage="WorkRate[index].rate" :status="workStatus[index]">
                  <span :style="getWorkRateStyle(index)">{{ item }}：{{ WorkRate[index].stopHour }}小时 / {{ WorkRate[index].totalHour }}小时</span>
                </el-progress>
                <span>作业率：{{ WorkRate[index].rate }}%</span>
              </div>
            </el-card>
          </el-footer>
        </el-container>
      </el-col>
      <el-col :span="9">
        <el-header style="height: 40vh; width: 100%">
          <div class="prodBar common-div-card">
            <graph-bar-other :data1="qualitySet" :data2="qualityReal" :datax="qualityx" :title="qualityTitle" :data-name="qualityName" />
          </div>
        </el-header>
        <el-main style="height: 40vh">
          <div class="prodPie common-div-card">
            <div style="width: 45%; height: 100%">
              <graph-pie :data="profitData" :title="'利润(万元)'" />
            </div>
            <div style="width: 45%; height: 100%">
              <graph-pie :data="costData" :title="'成本(万元)'" />
            </div>
          </div>
        </el-main>
        <el-footer style="min-height: 25vh">
          <!-- <div class="footer-table common-div-card"> -->
          <el-card shadow="hover">
            <template #header>
              <div class="prod-record">
                <span>生产概览</span>
              </div>
            </template>
            <el-table
              height="18vh"
              :data="prodRecord"
              :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
              size="small"
            >
              <el-table-column prop="productionLine" label="机组" />
              <el-table-column prop="crew" label="班产" />
              <el-table-column prop="day" label="日产" />
              <el-table-column prop="month" label="月产" />
              <el-table-column prop="year" label="年产" />
            </el-table>
          </el-card>
          <!-- </div> -->
        </el-footer>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import GraphPie from '.././components/GraphPie.vue';
  import GraphBarOther from '../components/GraphBarOther.vue';
  import GraphBarLine from '../CGL1870/components/GraphBarLine.vue';
  import { overviewApi } from '/@/api/report/overview';
  import { ElMessage, CalendarDateType, CalendarInstance } from 'element-plus';

  interface GrqaphData {
    x: string[];
    y1: number[];
    y2?: number[];
    y3?: number[];
    y4?: number[];
  }

  const calendar = ref<CalendarInstance>();
  const selectDate = (val: CalendarDateType) => {
    if (!calendar.value) return;
    calendar.value.selectDate(val);
  };

  const prodRecord = ref<any>([]);
  const accidentData = ref<any>([{ accidentName: '酸轧天车钩头掉落', date: '2024-03-06', responsibleCrew: '酸轧', handlingOpinion: '' }]);
  const objectionData = ref<any>([{ objectionName: '比亚迪划伤', date: '2024-03-06', responsibleCrew: '连退', handlingOpinion: '' }]);

  const prodOutputReal = ref<any>([0]); //215213, 129041, 84097, 65789, 40051, 197600
  const prodOutputSet = ref<any>([0]); // 214900, 128000, 84000, 78000, 40000, 197600
  const prodOutputx = ref<any>(['酸轧', '连退1630', '连退2150', '镀锌1870', '重卷', '缴库量']);
  const prodOutputName = ref<any>(['计划', '实际']);
  const prodOutputTitle = ref('当前月产量'); // 当前月产量

  const yieldRateReal = ref<any>([0]); // 98.21, 98.21, 98.21, 98.21, 98.21, 98.21
  const yieldRateSet = ref<any>([0]); // 98.3, 98.3, 98.3, 98.3, 98.3, 98.3
  const yieldRatex = ref<any>(['作业区', '酸轧2280', '连退2150', '连退1630', '镀锌1870', '重卷机组']);
  const yieldRateName = ref<any>(['目标', '实际']);
  const yieldRateTitle = ref('三冷区域成材率');

  const qualityReal = ref<any>([0]); // 56, 41, 23, 15, 2
  const qualitySet = ref<any>([0]); // 70, 40, 32, 30, 10
  const qualityx = ref<any>(['酸轧2280', '连退2150', '连退1630', '镀锌1870', '重卷机组']);
  const qualityName = ref<any>(['目标', '实际']);
  const qualityTitle = ref('当前月质量');

  const profitData = ref<any>([
    { name: '冷硬产品', value: 201 },
    { name: '连退产品', value: 1245 },
    { name: '镀锌产品', value: 2455 },
  ]);
  const costData = ref<any>([
    { name: '原料成本', value: 784 },
    { name: '加工成本', value: 478 },
    { name: '辅料成本(含锌锭)', value: 201 },
    { name: '包装成本', value: 94 },
  ]);

  const radio = ref('month');
  const prodRank = ref([]);
  const WorkRate = ref<any>([]);
  const workStatus = ref(['', 'success', 'warning', 'exception']);
  const WorkRateList = ref(['3#酸轧故障时长', '2#连退故障时长', '3#连退故障时长', '5#镀锌故障时长']);
  const prodRankGraph = reactive<GrqaphData>({
    x: [],
    y1: [],
  });

  const getWorkRateStyle = (index: number) => {
    if (WorkRate.value[index].rate < 40) return { color: '#000' };
    return { color: '#fff' };
  };

  // ------------------------------------------------ 数据对接 -------------------------------------------------

  // 产量数据
  const getProdRecord = async () => {
    try {
      const res = await overviewApi.getProdRecord();
      prodOutputx.value = res.data.data.category;
      prodOutputSet.value = res.data.data.target;
      prodOutputReal.value = res.data.data.actual;
      // 标题
      const currentDate = new Date();
      prodOutputTitle.value = `${currentDate.getFullYear()}年${currentDate.getMonth() + 1}月产量`;
    } catch (error) {
      prodOutputx.value = [];
      prodOutputSet.value = [];
      prodOutputReal.value = [];
      console.error('获取产量数据失败: ', error);
      ElMessage.error('获取产量数据失败');
    }
  };

  // 质量数据
  const getQualityRecord = async () => {
    try {
      const res = await overviewApi.getQualityRecord();
      qualityx.value = res.data.data.category;
      qualitySet.value = res.data.data.target;
      qualityReal.value = res.data.data.actual;
      // 标题
      const currentDate = new Date();
      qualityTitle.value = `${currentDate.getFullYear()}年${currentDate.getMonth() + 1}月质量`;
    } catch (error) {
      qualityx.value = [];
      qualitySet.value = [];
      qualityReal.value = [];
      console.error('获取质量数据失败: ', error);
      ElMessage.error('获取质量数据失败');
    }
  };

  // 成材率数据
  const getYieldRateRecord = async () => {
    try {
      const res = await overviewApi.getYieldRateRecord();
      yieldRatex.value = res.data.data.category;
      yieldRateSet.value = res.data.data.target;
      yieldRateReal.value = res.data.data.actual;
    } catch (error) {
      yieldRatex.value = [];
      yieldRateSet.value = [];
      yieldRateReal.value = [];
      console.error('获取质量数据失败: ', error);
      ElMessage.error('获取质量数据失败');
    }
  };

  // 产量数据
  const getProdRecordList = async () => {
    try {
      const res = await overviewApi.getProdRecordList();
      if (res.data.status != 2000) {
        throw new Error('获取产量数据失败');
      }
      prodRecord.value = res.data.data.map((item: any) => ({
        productionLine: item.groupName,
        crew: item.crewTotal,
        day: item.dayTotal,
        month: item.monthTotal,
        year: item.yearTotal,
      }));
    } catch (error: any) {
      prodRecord.value = [];
      console.error('获取产量数据失败: ', error);
      ElMessage.error(error.message);
    }
  };

  // 产量记录
  const getProdList = async () => {
    try {
      const res = await overviewApi.getProdList({ dateType: radio.value, lineName: 'tcm2280' });
      if (res.data.status != 2000) {
        throw new Error('获取产量记录数据失败');
      }
      // prodRank.value = res.data.data;
      prodRankGraph.x = [];
      prodRankGraph.y1 = [];
      res.data.data.forEach((item: any) => {
        prodRankGraph.x.push(item.date);
        prodRankGraph.y1.push(item.workOut);
      });
    } catch (error: any) {
      prodRecord.value = [];
      console.error('获取产量记录数据失败: ', error);
      ElMessage.error(error.message);
    }
  };

  const getWorkRate = async () => {
    try {
      const res = await overviewApi.getWorkRate();
      if (res.data.status != 2000) {
        throw new Error('获取产量记录数据失败');
      }
      WorkRate.value = res.data.data;
    } catch (error: any) {
      prodRecord.value = [];
      console.error('获取产量记录数据失败: ', error);
      ElMessage.error(error.message);
    }
  };

  onMounted(() => {
    getProdRecord();
    getQualityRecord();
    getYieldRateRecord();
    getProdRecordList();
    getProdList();
    getWorkRate();
  });
</script>
<style lang="less" scoped>
  @border-radius: 8px;
  @primary-color: #2c69e8;
  @box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  @box-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
  @border:1px solid #dcdfe6;
  .common-layout {
    width: 100%;
    // position: relative;
    background-color: #fff;
    overflow: hidden;
  }

  .common-div-card {
    box-shadow: @box-shadow;
    transition: 0.3s;
    border-radius: @border-radius;
    border: @border;

    // 悬停状态
    &:hover {
      box-shadow: @box-shadow-hover;
    }
  }

  .left-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
  }

  .processGap {
    display: flex;
    flex-direction: column;

    .el-progress {
      margin-bottom: 5px;
    }
  }

  .el-footer {
    :deep(.el-card .el-card__body) {
      padding: 5px 12px !important;
    }
  }

  .prodBar {
    width: 100%;
    height: 100%;
  }

  .prodPie {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;

    // :deep(.el-card__body) {
    //   display: flex;
    //   justify-content: space-around;
    //   width: 100%;
    //   height: 100%;
    //   align-items: center;
    //   overflow: auto;
    // }
  }

  .footer-table {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    max-width: 100%;
    padding: 12px;

    :deep(.el-table) {
      height: 100%;
      max-width: 100%;
    }

    .footer-table-left {
      width: 50%;
      max-width: 50%;
    }
  }

  .inline-block {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    text-align: center;
    align-items: center;

    span {
      font-size: 12px;
    }

    .el-progress {
      width: 80%;
      padding: 0;
    }
  }

  :deep(.el-calendar) {
    --el-calendar-cell-width: 2vw;
  }
  :deep(.el-calendar .el-calendar__header) {
    padding: 0 !important;
  }
  :deep(.el-calendar .el-calendar__body) {
    padding: 12px !important;
  }
  :deep(.el-calendar-day) {
    text-align: center;
  }
  .calendar {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 12px;
    align-items: center;
  }

  .svg-load {
    width: 50%;
    height: 50%;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  .ove-mid-footer-process {
    width: 100%;
    height: 100%;
    align-content: center;
    :deep(.el-card__body) {
      width: 100%;
      height: 80%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    span {
      color: #333;
    }
  }

  .ove-left-mid {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .ove-left-mid-div2 {
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .radio-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 16;
      font-weight: bold;
    }
  }

  .flex-gap {
    :deep(.el-card__body) {
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      gap: 2vh;
    }
  }

  .prod-record {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 16px;

    span {
      font-weight: bold;
    }
  }
</style>
